import { ContentContainer } from '@/components/layout/ContentContainer'
import { Card, Collapse, List, Switch, Timeline } from '@douyinfe/semi-ui'

const Component = () => {
  const data1 = [
    {
      title: 'Minimize to tray',
      description: 'Click the minimize button to automatically hide to the tray',
    },
    {
      title: 'Backend operation',
      description: 'Keep running in the background after closing the software',
    },
  ]
  const data2 = [
    {
      title: 'Switch Theme',
      description: 'Switch between "bright" and "dark" themes',
    },
  ]
  return (
    <>
      <ContentContainer>
        <Card bordered={false} headerLine={true} title="Basic Settings" bodyStyle={{ padding: '5px 0' }}>
          <Collapse defaultActiveKey={['1', '2']} expandIconPosition="left">
            <Collapse.Panel header="Tray settings" itemKey="1" style={{ borderBottom: 0 }}>
              <List
                dataSource={data1}
                renderItem={(item) => (
                  <List.Item
                    main={
                      <div>
                        <span style={{ color: 'var(--semi-color-text-1)', fontWeight: 500 }}>{item.title}</span>
                        <p style={{ color: 'var(--semi-color-text-3)', margin: '6px 0' }}>{item.description}</p>
                      </div>
                    }
                    extra={<Switch></Switch>}
                  />
                )}
              />
            </Collapse.Panel>
            <Collapse.Panel header="Theme settings" itemKey="2" style={{ borderBottom: 0 }}>
              <List
                dataSource={data2}
                renderItem={(item) => (
                  <List.Item
                    main={
                      <div>
                        <span style={{ color: 'var(--semi-color-text-1)', fontWeight: 500 }}>{item.title}</span>
                        <p style={{ color: 'var(--semi-color-text-3)', margin: '6px 0' }}>{item.description}</p>
                      </div>
                    }
                    extra={<Switch></Switch>}
                  />
                )}
              />
            </Collapse.Panel>
          </Collapse>
        </Card>
        <Card
          bordered={false}
          headerLine={true}
          style={{ marginTop: 10 }}
          title="Advanced setting"
          bodyStyle={{ padding: '5px 0' }}
        >
          <Collapse expandIconPosition="left">
            <Collapse.Panel header="Tray settings" itemKey="1" style={{ borderBottom: 0 }}>
              <List
                dataSource={data1}
                renderItem={(item) => (
                  <List.Item
                    main={
                      <div>
                        <span style={{ color: 'var(--semi-color-text-1)', fontWeight: 500 }}>{item.title}</span>
                        <p style={{ color: 'var(--semi-color-text-3)', margin: '6px 0' }}>{item.description}</p>
                      </div>
                    }
                    extra={<Switch></Switch>}
                  />
                )}
              />
            </Collapse.Panel>
            <Collapse.Panel header="Theme settings" itemKey="2" style={{ borderBottom: 0 }}>
              <List
                dataSource={data2}
                renderItem={(item) => (
                  <List.Item
                    main={
                      <div>
                        <span style={{ color: 'var(--semi-color-text-1)', fontWeight: 500 }}>{item.title}</span>
                        <p style={{ color: 'var(--semi-color-text-3)', margin: '6px 0' }}>{item.description}</p>
                      </div>
                    }
                    extra={<Switch></Switch>}
                  />
                )}
              />
            </Collapse.Panel>
          </Collapse>
        </Card>
      </ContentContainer>
    </>
  )
}
export default Component
